<!--
@负责人:chenwenxiao
@创建时间:2016-11-05
@版本:v1.0.0
@描述:页面头部header
@使用方法:
<template>
    <g-header></g-header>
</template>
<script>
    export default{
        components:{
            gHeader:require('xxx/xxx/com-header.vue')
        }
    }
</script>
@参数说明:
无
-->
<template>
    <div>
        <nav class="navbar navbar-default navbar-fixed-top header" id="header-nav">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" v-on:click="openMenu">
                        <span class="sr-only"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <img class="logo-img" src="../../assets/images/logo.png">
                    <img class="logo-img-w" src="../../assets/images/logo_w.png">
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="javascript:">首页</a></li>
                        <li><a href="javascript:">产品服务</a></li>
                        <li><a href="javascript:">商户相关</a></li>
                        <li><a href="javascript:">关于我们</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="javascript:">0755-82833091</a></li>
                        <li><a href="javascript:">登录</a></li>
                        <li class="dropdown">
                            <a href="javascript:" v-on:click="openDropDown" class="dropdown-toggle">中文(简体)<span class="caret"></span></a>
                            <ul class="dropdown-menu" style="display: none;">
                                <li class="active"><a href="javascript:;">中文(简体)</a></li>
                                <li><a href="javascript:">中文(繁體)</a></li>
                                <li><a href="javascript:">English</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</template>
<script>
    import  '../../assets/css/bundle.css'
    import  '../../assets/less/index.less'

    export default {
        data (){
            return {}
        },
        components: {},
        watch: {},
        methods: {
            openDropDown(e){
                $(e.currentTarget).parent().addClass('open').end().siblings('.dropdown-menu').slideDown();
                e.stopPropagation();
            },
            openMenu(e){
                if ($(e.currentTarget).hasClass('open-menu')) {
                    $(e.currentTarget).removeClass('open-menu').parent().siblings('.navbar-collapse').slideUp();
                } else {
                    $(e.currentTarget).addClass('open-menu').parent().siblings('.navbar-collapse').slideDown();
                }
            }
        },
        ready(){
            var that = this;
            $(document).on('click', function () {
                $('.dropdown-menu').slideUp(300, function () {
                    $(this).parent().removeClass('open')
                });
            });
            $(document).scroll(function () {
                let $d = $(document), $w = $(window), radio,$header = $('#header-nav');
                radio = $d.scrollTop() / ($d.height() - $w.height());
                if (radio > 0.05) {
                    $header.addClass('nav-fix');
                }else {
                    $header.removeClass('nav-fix');
                }
            });
        }
    }
</script>
<style>
    .collapse{
        visibility: visible!important;
    }
</style>
